<%@page import="java.sql.*,java.util.regex.*"%>
<%@page import="store.book.javabean.User_Table"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<jsp:useBean id="ut" class="store.book.javabean.User_Table"></jsp:useBean>
<jsp:setProperty property="*" name="ut" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录 - BookStore</title>
<!-- 引入 Bootstrap -->
<link href='css/bootstrap.min.css' rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
        	<script src="js/html5shiv.min.js"></script>
        	<script src="js/respond.min.js"></script>
    	<![endif]-->
<style>
body {
	background-color: #F1F1F1;
}

.col-center-block {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.asd {
	width: 130px;
	margin: 0 auto;
	margin-bottom: 15px;
}

.xx {
	margin-top: -15px;
}

.form-control-feedback {
	top: 10%;
}

span img {
	position: absolute;
	z-index: 2;
	right: 4px;
	width: 94px;
	height: 36px;
	top: 10%;
}

#imginput {
	padding-right: 102px;
}
</style>
</head>
<body>
	<%
		String error = (String) session.getAttribute("error");
		if (error != null) {
	%>
	<div class="alert alert-danger alert-dismissable">
		<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">&times;</button>
		<p id="error"><%=error%></p>
	</div>
	<%
		session.removeAttribute("error");
		}
	%>

	<%
		String succeed = (String) session.getAttribute("succeed");
		if (succeed != null) {
	%>
	<div class="alert alert-success alert-dismissable">
		<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">&times;</button>
		<p id="succeed"><%=succeed%></p>
	</div>
	<%
		session.removeAttribute("succeed");
		}
	%>

	<div class="container">
		<div class="row myCenter">
			<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-center-block">
				<h1></h1>
				<div align="center">
					<img alt="BookStore" src="images/logo.png" width="190px" height="90px" />
				</div>
				<div class="asd">
					<ul id="myTab" class="nav nav-tabs">
						<li id="upActive" class="active"><a href="#signup"
							data-toggle="tab">注册</a>
						</li>
						<li id="inActive"><a href="#signin" data-toggle="tab">登录</a>
						</li>
					</ul>
				</div>
				<div id="myTabContent" class="tab-content">
					<div class="tab-pane fade in active" id="signup">
						<form action="servlet/UserRegister" method="post"
							class="form-signup">
							<div class="form-group input-group-lg has-feedback">
								<span class="glyphicon glyphicon-user form-control-feedback"></span>
								<input type="text" class="form-control" placeholder="姓名"
									name="user_name" id="registerName" required />
							</div>
							<div class="form-group input-group-lg has-feedback xx">
								<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
								<input type="email" class="form-control" placeholder="邮箱"
									name="user_email" id="registerEmail" required>
							</div>
							<div class="form-group input-group-lg has-feedback xx">
								<span class="glyphicon glyphicon-lock form-control-feedback"></span>
								<input type="password" class="form-control" placeholder="密码"
									name="user_password" id="registerPwd" required>
							</div>
							<div class="form-group input-group-lg has-feedback xx">
								<span><img src="servlet/AuthCode" data-toggle="tooltip"
									data-placement="top" title="看不清？换一张" onclick="changeImg()" id="authCode" /> </span> <input type="text"
									class="form-control" id="imginput" placeholder="验证码"
									name="captcha" required>
							</div>
							<button class="btn btn-lg btn-primary btn-block" type="submit"
								name="submit" id="registerBtn">注册</button>
						</form>
					</div>
					<div class="tab-pane fade" id="signin">
						<form action="servlet/VerifyLogin" method="post"
							class="form-signin">
							<!-- 判断用户上次登录时有没有勾选记住我选项 -->
							<!-- 如果勾选了则将上次登录的密码填入输入框 -->
							<%
								String rememberEmail = (String) session.getAttribute("rememberEmail");
								String rememberPassWord = (String) session.getAttribute("rememberPassWord");
								if (rememberEmail != null) {
							%>
							<div class="form-group input-group-lg has-feedback">
								<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
								<input type="email" id="email" class="form-control" value='<%=rememberEmail%>'
									placeholder="邮箱" name="user_email" required>
							</div>
							<%
								} else {
							%>
							<div class="form-group input-group-lg has-feedback">
								<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
								<input type="email" id="email" class="form-control"
									placeholder="邮箱" name="user_email" required>
							</div>
							<%
								}
								
								if (rememberPassWord != null) {
							%>
							<div class="form-group input-group-lg has-feedback xx">
								<span class="glyphicon glyphicon-lock form-control-feedback"></span>
								<input type="password" id="inputPassword" class="form-control" value='<%=rememberPassWord%>'
									placeholder="密码" name="user_password" required>
							</div>
							<%
									session.removeAttribute("rememberPassWord");
								} else {
							%>
							<div class="form-group input-group-lg has-feedback xx">
								<span class="glyphicon glyphicon-lock form-control-feedback"></span>
								<input type="password" id="inputPassword" class="form-control"
									placeholder="密码" name="user_password" required>
							</div>
							<%
								}
							%>
							<div>
								<input type="checkbox" id="rememberMe" name="rememberMe" value="rememberMe" />
								<label for="rememberMe" class="text-muted">&nbsp;记住我</label>
							</div>
							<button class="btn btn-lg btn-primary btn-block" type="submit"
								name="submit" id="loginBtn">登录</button>
						</form>
					</div>
					
					<%
						//若从item.jsp跳转过来则设置session，以便在登录验证完成后跳转到item.jsp
						String i2l = request.getParameter("itemtologin");
						if (i2l != null) {
							if ("itemtologin".equals(i2l)) {
								session.setAttribute("itemtologin", "itemtologin");							
							}
						}
					%>
					
				</div>
			</div>
		</div>
	</div>

	<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
	<script src="js/jquery-3.1.1.min.js"></script>
	<!-- 包括所有已编译的插件 -->
	<script src="js/bootstrap.min.js"></script>
	<script>
		$(function() {
			$("[data-toggle='tooltip']").tooltip();
		});
	</script>
	
	<script type="text/javascript">
		function changeImg() {       
        	$("#authCode").attr("src","servlet/AuthCode?d="+new Date().valueOf());       
    	}
	</script>

	<script>
		//若在首页点击登录或立即注册按钮则跳转到本页相应的标签页下
		var inActive = document.getElementById('inActive');
		var upAvtive = document.getElementById('upActive');
		var signin = document.getElementById('signin');
		var signup = document.getElementById('signup');

		var loc = location.href;
		var n1 = loc.length;
		var n2 = loc.indexOf("=");
		var id = decodeURI(loc.substr(n2 + 1, n1 - n2));

		if (id == "登录") {
			inActive.setAttribute("class", "active");
			signin.setAttribute("class", "tab-pane fade in active");
			signup.setAttribute("class", "tab-pane fade");
			upAvtive.removeAttribute("class");
		} else if (id == "立即注册") {
			upAvtive.setAttribute("class", "active");
			inActive.removeAttribute("class");
			signup.setAttribute("class", "tab-pane fade in active");
			signin.setAttribute("class", "tab-pane fade");
		}
		
		//若用户在没有登录的情况下点击立即购买或加入购物车按钮则从item.jsp跳转到login.jsp进行登录
		if (id == "itemtologin") {
			inActive.setAttribute("class", "active");
			signin.setAttribute("class", "tab-pane fade in active");
			signup.setAttribute("class", "tab-pane fade");
			upAvtive.removeAttribute("class");
		}
	</script>
</body>
</html>
